// 这是添加模态框
import React, { useState, useContext } from 'react';
import { LoadingOutlined, PlusOutlined } from '@ant-design/icons';
import { Modal, Input, Select, Switch, message, Upload } from 'antd';
import type { UploadChangeParam } from 'antd/es/upload';
import { addReason } from '../../../../api/OrderApi'
import type { RcFile, UploadFile, UploadProps } from 'antd/es/upload/interface';
const { TextArea } = Input;
import getSelectTime from '../../../../utils/date'
import createContext from '../../../../utils/gyqContext'
import './css/OrderReasonAdd.less'

interface DataType {
    isModalOpen: boolean,
    closeModal(): void,
}


export default function OrderReasonAdd(props: DataType) {

    const [loading, setLoading] = useState(false);
    const [isOpen, setIsOpen] = useState<boolean>(false);
    const context = useContext<any>(createContext)
    const [name, setName] = useState<string>() //原因描述
    // const [sort, setSort] = useState<string>() //排序
    const [grounding, setGrounding] = useState<string | boolean>() //是否启用
    // console.log('props', props);


    const handleCancel = () => { //点击取消关闭弹框
        props.closeModal();
    };

    // 选择是否上架
    const onChange = (checked: boolean) => {
        console.log('checked', checked);
        setIsOpen(!isOpen)
    };

    // 输入原因描述
    const getNames = (e: any) => {
        setName(e.target.value)
        console.log('name', name);

    }


    const handleOk = (values: any) => { //点击确定传输数据,关闭弹框
        let date = new Date()
        console.log('获取当前时间', date);
        props.closeModal()
        // setIsModalOpen(false);
        console.log(name, grounding);
        addReason({
            // appliId:null,
            insertTime: getSelectTime(date),
            startUse: isOpen == true ? 1 : 0,
            reasonDescription: name,
        }).then(res => {
            console.log('添加原因res', res);

            // 提示
            message.success('添加成功');
            //  重新更新视图
            context.getAll()
            // setName('')
            // setIsOpen(false)
        }).catch(err => {
            console.log('err23232', err);
        })
        setName('')
        setIsOpen(false)
    };




    return (
        <div>
            <Modal title="添加退换原因" open={props.isModalOpen} onOk={handleOk} onCancel={handleCancel} centered={true}>
                <div className='add-classify'>
                    <p>原因描述</p>
                    <Input placeholder="输入原因" className='input' onChange={getNames} />
                </div>
                <div className='add-classify'>
                    {/* 是否上架 */}
                    <p>是否启用</p>
                    <Switch checked={isOpen} onChange={onChange} className='switch' />
                </div>
            </Modal>
        </div>
    )
}